<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Batch Testing</title>
	</head>
	<body>
	    <style type="text/css" media="screen">.thumb {
		  height: 75px;
		  border: 1px solid #000;
		  margin: 10px 5px 0 0;
		}
		.btn1{padding:10px 15px;background:#4479BA;color:#FFF!important;}.btn2,.btn3,.btn4{padding:10px 15px;background:#4479BA;color:#FFF!important;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border:solid 1px #20538D;text-shadow:0 -1px 0 rgba(0,0,0,0.4);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.4),0 1px 1px rgba(0,0,0,0.2);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.4),0 1px 1px rgba(0,0,0,0.2);box-shadow:inset 0 1px 0 rgba(255,255,255,0.4),0 1px 1px rgba(0,0,0,0.2);-webkit-transition-duration:0.2s;-moz-transition-duration:0.2s;transition-duration:0.2s;}.btn3:hover,.btn4:hover{background:#356094;border:solid 1px #2A4E77;text-decoration:none;}.btn4{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.btn4:active{background:#2E5481;border:solid 1px #203E5F;-webkit-box-shadow:inset 0 1px 4px rgba(0,0,0,0.6);-moz-box-shadow:inset 0 1px 4px rgba(0,0,0,0.6);box-shadow:inset 0 1px 4px rgba(0,0,0,0.6);}</style>

		    <div class="entry"> Select clean images:
			<input type="file" id="cleans" name="files[]" multiple />
			
		    </div>
		    <div class="entry"> Select nude images:
			<input type="file" id="nudes" name="files[]" multiple />
		    </div>
		    <div class="entry">
			<button class="btn4" onclick="runAllTests()">Run Tests</button>
		    </div>
		<output id="out_msg_place"></output>
		<output id="list"></output>
		<canvas id="canvas1" width="500" height="500" style="border:1px solid #d3d3d3;">
			Canvas 1
		</canvas>
		
    		<script>
		var num_nudes=0;
		var num_cleans=0;
		
		function handleCleansSelect(evt) {
		  var files = evt.target.files; // FileList object
		  num_cleans = files.length;
		  // Loop through the FileList and render image files as thumbnails.
		  for (var i = 0, f; f = files[i]; i++) {

		    // Only process image files.
		    if (!f.type.match('image.*')) {
		      continue;
		    }

		    var reader = new FileReader();
		    
		    var img = document.createElement("img");
		    var imageId = "c" + i;
		    img.setAttribute("id", imageId);
		    img.setAttribute("style","display:none;");
		    img.src = "images/test_images/clean/" + f.name;
		    img.style.visibility = "hidden";
		    
		    reader.onload = function(evt) {
			var image = new Image();
			image.onload = function(evt) {
			    //img.setAttribute("style","display:none;");
			    img.width=this.width;
			    img.height=this.height;
			};
			image.src = evt.target.result; 
		    };
		    
		    document.getElementById('list').insertBefore(img, null);
		    /*
		    // this part creates thumbnails is we want them
		    // Closure to capture the file information.
		    reader.onload = (function(theFile) {
		      return function(e) {
			// Render thumbnail.
			var span = document.createElement('span');
			span.innerHTML = ['<img class="thumb" src="', e.target.result,
					  '" title="', escape(theFile.name), '"/>'].join('');
			document.getElementById('list').insertBefore(span, null);
		      };
		    })(f);
		    */

		    // Read in the image file as a data URL.
		    reader.readAsDataURL(f);
		  }
		}
		
		function handleNudesSelect(evt) {
		  var files = evt.target.files; // FileList object
		  num_nudes = files.length;
		  // Loop through the FileList and render image files as thumbnails.
		  for (var i = 0, f; f = files[i]; i++) {

		    // Only process image files.
		    if (!f.type.match('image.*')) {
		      continue;
		    }

		    var reader = new FileReader();
		    
		    var img = document.createElement("img");
		    var imageId = "n" + i;
		    img.setAttribute("id", imageId);
		    img.src = "images/test_images/nude/" + f.name;
		    img.style.visibility = "hidden";
		    
		    reader.onload = function(evt) {
			var image = new Image();
			image.onload = function(evt) {
			    //img.setAttribute("style","display:none;");
			    img.width=this.width;
			    img.height=this.height;
			};
			image.src = evt.target.result; 
		    };
		    reader.readAsDataURL(f);
		    
		    document.getElementById('list').insertBefore(img, null);
		  }
		  
		}
		

		document.getElementById('cleans').addEventListener('change', handleCleansSelect, false);
		document.getElementById('nudes').addEventListener('change', handleNudesSelect, false);
		var out_message = document.createElement("label");
	        document.getElementById('out_msg_place').insertBefore(out_message, null);
		
		
		function runAllTests(){

		    var images = new Array();
		    // Loop through the clean images in index.html
		    for (var i = 0; i < num_cleans; i++) {
			images.push({"id":"c"+i, "expected":false});
		    }
		    // Loop through the nude images in index.html
		    for (var i = 0; i < num_nudes; i++) {
			images.push({"id":"n"+i, "expected":true});
		    }
	
		    var matches = [];
		    var false_matches = [];
		    var startTime = new Date().getTime();

		    (function testImage(i){

			    var image = images[i];
			    var i_plus_plus = i+1;
			    out_message.innerHTML = "Testing image " + i_plus_plus + " out of " + images.length + "<br>";

			    nude.load(image.id);
			    nude.scan(function(result){
				    if(result == image.expected){
					    matches.push(image);
				    } else if ((result == true) && (image.expected == false)) {
					    false_matches.push(image);
				    }
				    if(i != images.length-1){
						    testImage(i+1);
				    }else{
					var endTime = new Date().getTime();
					out_message.innerHTML = "Test Complete! <br>\n\
			    Test Duration: " + (endTime-startTime)+"ms <br>\n\
			    Correct Matches: " + matches.length + "/" + images.length + " <br> \n\
			    False Positives: " + false_matches.length + " <br>";
					
					if(matches.length != images.length){
						// do something here
					}
				    }
			    });

		    })(0);
		}
	
		</script>

		<script type="text/javascript" src="nude.js"></script>
		<script type="text/javascript" src="lib/edge_detection/pixastic.js"></script>
	</body>
</html>
